<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>规范检查</title>
		
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
		<script src="js/element-ui/lib/index.js"></script>
		<script src="js/axios.js"></script>
		
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/check.css">
	</head>
	<body>
		<div id="app">
			<div class="header-panel" v-loading.fullscreen.lock="loading" v-cloak>
				<div></div>
				<div><h2>{{title}}</h2></div>
				<div></div>
			</div>
			<div class="float-panel">
				<div>
					<el-tooltip effect="light" content="下载结果" placement="left">
						<el-button type="success" @click="downloadImg()" size="medium" icon="el-icon-download">下载</el-button>
					</el-tooltip>
				</div>
				<div>
					<el-tooltip effect="light" content="设置忽略拼写词" placement="left"  v-if="isShowSpelling">
						<el-button type="success" @click="showSpellingDialog()" size="medium" icon="el-icon-zoom-out">拼写</el-button>
					</el-tooltip>
				</div>
				<div>
					<el-tooltip effect="light" content="设置忽略复数词" placement="left" v-if="isShowPluralize">
						<el-button type="primary" @click="showPluralizeDialog()" size="medium" icon="el-icon-zoom-out">复数</el-button>
					</el-tooltip>
				</div>
			</div>
			<div class="container" id="postImg" ref="postImg">
				<div class="block" v-for="item in changeTableList">
					<h3><el-tag>{{item.name}}</el-tag></h3>
					<div class="block-content">
						<p class="m-p" v-for="(item1,index1) in item.suggestList" v-if="item1.isShow == 1">
							<span class="m-span">{{index1 + 1}}.</span class="m-span">
							<span>{{item1.desc}}</span>
							<el-tooltip effect="light" content="点击可忽略检查此单词，可在页面右边按钮中管理单词" placement="bottom">
								<el-button v-if="item1.code == checkSpellingTypeCode || item1.code == checkPluralizeTypeCode" style="margin-left: 10px;" type="success" size="mini" plain @click="showIgnoreConfirm(item1.code, item1.originWord)">点击忽略</el-button>
							</el-tooltip>
						</p>
					</div>
					<div class="block-child" v-for="item2 in item.childList">
						<h3><el-tag size="medium">{{item2.name}}</el-tag></h3>
						<div class="block-content">
							<p class="m-p" v-for="(item21,index21) in item2.suggestList" v-if="item21.isShow == 1">
								<span class="m-span">{{index21 + 1}}.</span>
								<span>{{item21.desc}}</span>
								<el-tooltip effect="light" content="点击可忽略检查此单词，可在页面右边按钮中管理单词" placement="bottom">
									<el-button v-if="item21.code == checkSpellingTypeCode || item21.code == checkPluralizeTypeCode" style="margin-left: 10px;" type="success" size="mini" plain @click="showIgnoreConfirm(item21.code, item21.originWord)">点击忽略</el-button>
								</el-tooltip>
							</p>
						</div>
					</div>
				</div>
			</div>
			<el-dialog title="设置忽略拼写词" :close-on-click-modal=false :close-on-press-escape=false :visible.sync="isShowSpellingDialog" width="550px">
				<div>
					<el-input type="textarea" :rows="10" placeholder="请输入忽略检查拼写的单词，用英文逗号隔开" v-model="ignoreSpellingWordStr">
					</el-input>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="isShowSpellingDialog = false">取消</el-button>
					<el-button type="success" @click="setIgnoreWords(11)">保存</el-button>
					<el-button type="success" @click="setIgnoreWords(12)">保存并刷新</el-button>
				</span>
			</el-dialog>
			<el-dialog title="设置忽略复数词" :close-on-click-modal=false :close-on-press-escape=false :visible.sync="isShowPluralizeDialog" width="550px">
				<div>
					<el-input type="textarea" :rows="10" placeholder="请输入忽略检查复数的单词，用英文逗号隔开" v-model="ignorePluralizeWordStr">
					</el-input>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="isShowPluralizeDialog = false">取消</el-button>
					<el-button type="success" @click="setIgnoreWords(21)">保存</el-button>
					<el-button type="success" @click="setIgnoreWords(22)">保存并刷新</el-button>
				</span>
			</el-dialog>
			<iframe src="component/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
		</div>
		<script src="js/html2canvas.min.js"></script>
		<script src="js/utils.js"></script>
		<script>
			let that = new Vue({
				el: '#app',
				data: function () {
					return {
						checkSpellingTypeCode: '12',
						checkPluralizeTypeCode: '31',
						title:"数据库规范检查",
						loading: true,
						isShowSpelling: false,
						isShowPluralize: false,
						isShowSpellingDialog: false,
						isShowPluralizeDialog: false,
						ignoreSpellingWordStr:"",
						ignorePluralizeWordStr:"",
						changeTableList:[],
					}
				},
				methods: {
					showSpellingDialog(){
						this.getIgnoreWords(this.checkSpellingTypeCode);
						this.isShowSpellingDialog = true;
					},
					showPluralizeDialog(){
						this.getIgnoreWords(this.checkPluralizeTypeCode);
						this.isShowPluralizeDialog = true;
					},
					showIgnoreConfirm(code, word){
						if (code == this.checkSpellingTypeCode) {
							if (this.ignoreSpellingWordStr.indexOf(word) == -1) {
								this.$confirm(`是否将“${word}”添加到拼写忽略词中？`, '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									this.ignoreSpellingWordStr += "," + word;
									this.setIgnoreWords(11);
									this.hideWord(type, word);
								}).catch(() => {
									
								});
							} else {
								this.hideWord(type, word);
							}
						} else if (code == this.checkPluralizeTypeCode) {
							if (this.ignorePluralizeWordStr.indexOf(word) == -1) {
								this.$confirm(`是否将“${word}”添加到复数忽略词中？`, '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									this.ignorePluralizeWordStr += "," + word;
									this.setIgnoreWords(21);
									this.hideWord(code, word);
								}).catch(() => {
									
								});
							} else {
								this.hideWord(code, word);
							}
						}
					},
					hideWord(code, word){
						for (let i=0; i<this.changeTableList.length; i++) {
							let suggestList = this.changeTableList[i].suggestList;
							let childList = this.changeTableList[i].childList;
							if (suggestList) {
								for (let j=0; j<suggestList.length; j++) {
									if (code == suggestList[j].code && word == suggestList[j].originWord) {
										suggestList[j].isShow = 0;
									}
								}
							}
							if (childList) {
								for (let j=0; j<childList.length; j++) {
									let suggestList2 = childList[j].suggestList;
									if (suggestList2) {
										for (let j=0; j<suggestList2.length; j++) {
											if (code == suggestList[j].code && word == suggestList2[j].originWord) {
												suggestList2[j].isShow = 0;
											}
										}
									}
								}
							}
						}
					},
					downloadImg(){
						// 参考：https://www.jianshu.com/p/22bd5b98e38a
						html2canvas(this.$refs.postImg, {
							allowTaint: true,
							taintTest: false,
							useCORS: true,
							scrollY: 0,
							scrollX: 0,
							width: this.$refs.postImg.clientWidth,
							height: this.$refs.postImg.clientHeight,
							scale: 2.5,
						}).then(canvas => {
							// 转成图片，生成图片地址
							let imgUrl = canvas.toDataURL('image/png');
							const eleLink = document.createElement('a');
							eleLink.href = imgUrl; // 转换后的图片地址
							eleLink.download = that.title;
							// 触发点击
							document.body.appendChild(eleLink);
							eleLink.click();
							// 然后移除
							document.body.removeChild(eleLink);
						});
					},
					getCheck(changeKey, checkIds){
						axios.get(`${baseUrl}/api/getCheck?changeKey=${changeKey}&checkIds=${checkIds}`).then(response => {
							console.log(response.data);
							let result = response.data.result;
							this.changeTableList = result;
						}).catch(error => {
							console.log(error);
						}).finally(() => {
							this.loading = false;
						})
					},
					setTitle(changeKey){
						axios.get(`${baseUrl}/api/list`).then(response => {
							let tableData = response.data.result;
							let res = tableData.filter((obj) => {
							  return obj.key == changeKey;
							});
							this.title = res[0].name + this.title;
						}).catch(error => {
							console.log(error);
						})
					},
					getIgnoreWords(code){
						axios.get(`${baseUrl}/api/getIgnoreWords?code=${code}`).then(response => {
							if (code == this.checkSpellingTypeCode) {
								this.ignoreSpellingWordStr = response.data.result;
							} else if (code == this.checkPluralizeTypeCode) {
								this.ignorePluralizeWordStr = response.data.result;
							}
						}).catch(error => {
							console.log(error);
						})
					},
					setIgnoreWords(type){
						let code = (type == 11 || type == 12) ? this.checkSpellingTypeCode : this.checkPluralizeTypeCode;
						let ignoreWords = (type == 11 || type == 12) ? this.ignoreSpellingWordStr : this.ignorePluralizeWordStr;
						let param = {
							code : code,
							ignoreWords : ignoreWords
						}
						axios.post(`${baseUrl}/api/saveIgnoreWords`, param).then(response => {
							if (response.data.code == 200) {
								this.$message({type: 'success', message: '保存成功'});
								this.isShowSpellingDialog = false;
								this.isShowPluralizeDialog = false;
								if (type == 12 || type == 22) {
									location.reload();
								}
							} else {
								this.$message({type: 'error', message: response.msg});
							}
						})
						.catch(error => {
							console.log(error);
							this.$message({type: 'error', message: '请求失败'});
						})
					},
				},
				mounted() {
					let changeKey = getUrlParam("changeKey");
					let checkIds = getUrlParam("checkIds");
					if (checkIds == undefined || checkIds == null) {
						checkIds = "";
					}
					if (checkIds.indexOf(this.checkSpellingTypeCode) != -1) {
						this.isShowSpelling = true;
					}
					if (checkIds.indexOf(this.checkPluralizeTypeCode) != -1) {
						this.isShowPluralize = true;
					}
					this.getCheck(changeKey, checkIds);
					this.setTitle(changeKey);
					this.getIgnoreWords(this.checkSpellingTypeCode);
					this.getIgnoreWords(this.checkPluralizeTypeCode);
				}
			})
		</script>
	</body>
</html>
